<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>管理员登录</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
        </script>
          <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans'><link rel="stylesheet" href="../static/css/click.css">
        <style>
            
            #login_frame {
                width: 400px;
                height: 320px;
                padding: 13px;
            
                position: absolute;
            
                background-color: rgba(240, 255, 255, 0.5);
            
                border-radius: 10px;
                text-align: center;
                margin: auto;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
            }
            
            form p > * {
                display: inline-block;
                vertical-align: middle;
            }
            
            #image_logo {
                margin-top: 5px;
            }
            
            .label_input {
                font-size: 14px;
                font-family: 宋体;
            
                width: 65px;
                height: 28px;
                line-height: 28px;
                text-align: center;
            
                color: white;
                background-color: #3CD8FF;
                border-top-left-radius: 5px;
                border-bottom-left-radius: 5px;
            }
            
            .text_field {
                width: 278px;
                height: 28px;
                border-top-right-radius: 5px;
                border-bottom-right-radius: 5px;
                border: 0;
            }
            
            #btn_login {
                font-size: 14px;
                font-family: 宋体;
            
                width: 120px;
                height: 28px;
                line-height: 28px;
                text-align: center;
            
                color: white;
                background-color: #3BD9FF;
                border-radius: 6px;
                border: 0;
            
                float: left;
            }
            
            #forget_pwd {
                font-size: 12px;
                color: white;
                text-decoration: none;
                position: relative;
                float: right;
                top: 5px;
            
            }
            
            #forget_pwd:hover {
                color: blue;
                text-decoration: underline;
            }
            
            #login_control {
                padding: 0 28px;
            }
        </style>
    </head>
    <body>
        <script>
            //==========================================
            // File:    background.js
            // Title:   星空连线(鼠标跟随)
            // Auther:  XieNaoban
            // Version: v1.1
            // Note:    直接扔在<body>里
            //==========================================

            // 可调参数
            var BACKGROUND_COLOR = "rgba(0,43,54,1)";   // 背景色
            var POINT_NUM = 99;                         // 屏幕上点的数目
            var POINT_COLOR = "rgba(255,255,255,0.7)";  // 点的颜色
            var LINE_LENGTH = 10000;                    // 点之间连线长度(的平方)

            // 创建背景画布
            var cvs = document.createElement("canvas");
            cvs.width = window.innerWidth;
            cvs.height = window.innerHeight;
            cvs.style.cssText = "\
                position:fixed;\
                top:0px;\
                left:0px;\
                z-index:-1;\
                opacity:1.0;\
                ";
            document.body.appendChild(cvs);

            var ctx = cvs.getContext("2d");

            var startTime = new Date().getTime();

            //随机数函数
            function randomInt(min, max) {
                return Math.floor((max - min + 1) * Math.random() + min);
            }

            function randomFloat(min, max) {
                return (max - min) * Math.random() + min;
            }

            //构造点类
            function Point() {
                this.x = randomFloat(0, cvs.width);
                this.y = randomFloat(0, cvs.height);

                var speed = randomFloat(0.3, 1.4);
                var angle = randomFloat(0, 2 * Math.PI);

                this.dx = Math.sin(angle) * speed;
                this.dy = Math.cos(angle) * speed;

                this.r = 1.2;

                this.color = POINT_COLOR;
            }

            Point.prototype.move = function () {
                this.x += this.dx;
                if (this.x < 0) {
                    this.x = 0;
                    this.dx = -this.dx;
                } else if (this.x > cvs.width) {
                    this.x = cvs.width;
                    this.dx = -this.dx;
                }
                this.y += this.dy;
                if (this.y < 0) {
                    this.y = 0;
                    this.dy = -this.dy;
                } else if (this.y > cvs.height) {
                    this.y = cvs.height;
                    this.dy = -this.dy;
                }
            }

            Point.prototype.draw = function () {
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }

            var points = [];

            function initPoints(num) {
                for (var i = 0; i < num; ++i) {
                    points.push(new Point());
                }
            }

            var p0 = new Point(); //鼠标
            p0.dx = p0.dy = 0;
            var degree = 2.5;
            document.onmousemove = function (ev) {
                p0.x = ev.clientX;
                p0.y = ev.clientY;
            }
            document.onmousedown = function (ev) {
                degree = 5.0;
                p0.x = ev.clientX;
                p0.y = ev.clientY;
            }
            document.onmouseup = function (ev) {
                degree = 2.5;
                p0.x = ev.clientX;
                p0.y = ev.clientY;
            }
            window.onmouseout = function () {
                p0.x = null;
                p0.y = null;
            }

            function drawLine(p1, p2, deg) {
                var dx = p1.x - p2.x;
                var dy = p1.y - p2.y;
                var dis2 = dx * dx + dy * dy;
                if (dis2 < 2 * LINE_LENGTH) {
                    if (dis2 > LINE_LENGTH) {
                        if (p1 === p0) {
                            p2.x += dx * 0.03;
                            p2.y += dy * 0.03;
                        } else return;
                    }
                    var t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg;
                    ctx.strokeStyle = "rgba(255,255,255," + t + ")";
                    ctx.beginPath();
                    ctx.lineWidth = 1.5;
                    ctx.moveTo(p1.x, p1.y);
                    ctx.lineTo(p2.x, p2.y);
                    ctx.closePath();
                    ctx.stroke();
                }
                return;
            }

            //绘制每一帧
            function drawFrame() {
                cvs.width = window.innerWidth;
                cvs.height = window.innerHeight;
                ctx.fillStyle = BACKGROUND_COLOR;
                ctx.fillRect(0, 0, cvs.width, cvs.height);

                var arr = (p0.x == null ? points : [p0].concat(points));
                for (var i = 0; i < arr.length; ++i) {
                    for (var j = i + 1; j < arr.length; ++j) {
                        drawLine(arr[i], arr[j], 1.0);
                    }
                    arr[i].draw();
                    arr[i].move();
                }

                window.requestAnimationFrame(drawFrame);
            }

            initPoints(POINT_NUM);
            drawFrame();

        </script>
        <script>//登录
            /**
            */

          function loo(){
            var username = document.getElementById("username");
            var pass = document.getElementById("password");
            $.post("http://39.106.79.148:5000/login?name="+username.value+"&password="+pass.value,
        function(data,status){
            if (username.value == "") {

                alert("请输入用户名");

            } else if (pass.value  == "") {

                alert("请输入密码");

            } else if(data=='success'){
                window.location.href="http://39.106.79.148:5000/controlPage";

            } else {
                window.location.href="http://39.106.79.148:5000/failedPage";

            }
        });
    }
        </script>
        <div id="login_frame">
 
            <p id="image_logo"><img src="../static/pics/login.png" height="100px"></p>
         
            <form method="post">
                <br>
                <p><label class="label_input">用户名</label><input type="text" id="username" class="text_field"/></p>
                <br>
                <p><label class="label_input">密码</label><input type="password" id="password" class="text_field"/></p>
         
                <div id="login_control">
                    <!-- <input type="button" class="blob-btn"  value="登录" onclick="loo()"/> -->
                    <button class="blob-btn" style="height: 40px;width: 25px;position: absolute;bottom: 2px;left: 30px;text-align: center;" onclick="loo()"> 
                        login
                        <span class="blob-btn__inner">
                            
                          <span class="blob-btn__blobs" style="text-align: center;">
                            
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                          </span>
                        </span>
                      </button>
                    </div>
                    
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                      <defs>
                        <filter id="goo">
                          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
                          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="goo"></feColorMatrix>
                          <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
                        </filter>
                      </defs>
                    </svg>
                    <!-- partial -->
                      
                    <!-- <a id="forget_pwd" onclick="alert('密码都记不住，给爷爬！')">忘记密码？</a> -->
                    <button class="blob-btn" style="height: 40px;width: 20px; text-align: center;position: absolute;bottom: 2px;right: 80px;" onclick="foo()"> forget
                        <span class="blob-btn__inner">
                          <span class="blob-btn__blobs">
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                            <span class="blob-btn__blob"></span>
                          </span>
                        </span>
                      </button>
                    </div>
                    
                    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
                      <defs>
                        <filter id="goo">
                          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10"></feGaussianBlur>
                          <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -7" result="goo"></feColorMatrix>
                          <feBlend in2="goo" in="SourceGraphic" result="mix"></feBlend>
                        </filter>
                      </defs>
                    </svg>
                </div>
            </form>
        </div>
    </body>
</html>